<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>我的拼团</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">

	<!--标准mui.css-->
	<link rel="stylesheet" href="../css/mui.min.css">
	<script src="../js/flexible.js" type="text/javascript" charset="utf-8"></script>
	<link rel="stylesheet" href="../css/css.css">
	<style type="text/css">
		.mui-control-content {
			/*background-color: white;
            min-height: 215px;*/
		}

		.mui-control-content {
			/*background-color: white;
            min-height: 215px;*/
		}

		.mui-control-content .mui-loading {
			margin-top: 50px;
		}

		.mui-title {
			color: #353535;
		}

		.mui-slider-indicator.mui-segmented-control {
			background: #ffffff;
		}

		.mui-bar {
			background: #ffffff;
		}

		.mui-bar-nav {
			top: 0;
			-webkit-box-shadow: none;
			box-shadow: none;
		}

		.mui-bar {
			border-bottom: 1px solid #E4E4E4;
			-webkit-box-shadow: none;
			box-shadow: none;
		}

		.mui-content {
			background: #f6f6f6;
		}

		.mui-segmented-control.mui-segmented-control-inverted~.mui-slider-progress-bar {
			/*	margin-bottom: 0.133rem;*/
			background-color: #1C83FC;
		}

		.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
			color: #1C83FC;
		}

		.mui-segmented-control .mui-control-item {
			line-height: 1.28rem;
		}

		.mui-slider .mui-segmented-control.mui-segmented-control-inverted~.mui-slider-group .mui-slider-item {
			border: none;
		}

		.mui-bar .mui-title {
			font-size: 0.48rem;
			font-family: 'PingFangSC-Semibold';
		}

		.mui-col-xs-4 {
			width: 25%;
		}

		.mui-slider-indicator.mui-segmented-control {
			position: fixed;
			z-index: 999;
		}

		.mui-segmented-control.mui-segmented-control-inverted~.mui-slider-progress-bar {
			position: fixed;
			top: 2.453rem
		}

		.mui-slider .mui-slider-group {
			margin-top: 1.57rem;
		}

		.mui-scroll-wrapper {
			position: static;
		}

		.mui-scroll {
			position: static;
		}

		.mui-table-view-cell {
			padding: 0;
			margin-bottom: 0.2667rem;
		}

		.mui-table-view-cell.mui-active {
			background-color: #ffffff !important;
		}

		.mui-table-view {
			background: #f6f6f6;
		}

		.mui-table-view-cell {
			position: static;
			background: #ffffff;
		}

		.mui-segmented-control .mui-control-item {
			font-size: 0.4rem;
		}

		html,
		body {
			height: 100%;
			background-color: #f6f6f6;
		}

		.top_nav {
			height: 50px;
			background-color: #FFFFFF;
			position: fixed;
			top: 44px;
			left: 0;
			z-index: 995;
			padding: 0 15px;
			width: 100%;
		}

		.top_bg {
			height: 60px;
			background-color: #F6F6F6;
		}

		.top_nav_item {
			width: 25%;
			float: left;
			height: 50px;
			text-align: center;
			line-height: 50px;
			font-size: 14px;
			border-bottom: 1px solid transparent;
		}

		.top_nav .active {
			border-bottom: 1px solid #007aff;
		}

		.order_list_info_bottom_productBtn_right {
			margin-left: 0.2rem;
		}
	</style>
	<!--App自定义的css-->
	<!--<link rel="stylesheet" type="text/css" href="../css/app.css" />-->
</head>

<body>
	<header class="mui-bar mui-bar-nav">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">我的拼团</h1>
	</header>
	<div class="mui-content" id="order">
		<div class="top_nav">
			<div :class="(k+1)==now_nav_index?' top_nav_item active':' top_nav_item ' " v-for="i,k in top_nav" @click="change_nav(k)">
				<span v-html="i.name"></span>
			</div>
			<!--<div class="top_nav_item" @click="get_data(2)">
            <span>待发货</span>
        </div>
        <div class="top_nav_item" @click="get_data(3)">
            <span>待收货</span>

        </div>
        <div class="top_nav_item" @click="get_data(4)">
        <span>已完成</span>
        </div>-->
		</div>
		<div class="top_bg"></div>
		<div class="mui-scroll-wrapper">
			<div class="mui-scroll">
				<ul class="mui-table-view">


					<li class="mui-table-view-cell" v-for="(daifas, index) in list">
						<div class="order_list_info_top">
							<div class="order_list_info_top_text">社区商城</div>
							<div class="order_list_info_top_state"> {{daifas|status_to_name}}</div>
						</div>

						<div class="order_list_info_container" @click="to_order_detail(daifas.orderid)">
							<div class="order_list_info_container_img">
								<img :src="daifas.pic" />
							</div>
							<div class="order_list_info_container_right">
								<div class="order_list_info_container_right_text">{{daifas.goodsname}}</div>
								<div class="order_list_info_container_right_num">X {{daifas.num}}</div>
								<div class="order_list_info_container_right_price">￥{{daifas.money}}</div>
							</div>
						</div>
						<div class="order_list_info_bottom">
							<div class="order_list_info_bottom_productNum">共{{daifas.num}}件商品</div>
							<div class="order_list_info_bottom_productAdd">合计</div>
							<div class="order_list_info_bottom_productPic">￥{{daifas.money}}</div>
							<div class="order_list_info_bottom_productBtn">

								<!-- 
									status  1    s_status 0       代付款
									status  2    s_status 0       拼团中 
									status  2    s_status 1       拼团成功 未发货 提醒发货
									status  3    s_status 1       拼团成功 已发货 待确认收获
									status  4    s_status 1       拼团成功 已确认收货 待评价
									status  2    s_status -1      拼团失败
									 -->
								<div @click="back_money(index)" v-show="daifas.status==2&&daifas.s_status==0" class="order_list_info_bottom_productBtn_right order_list_info_bottom_productBtn_one">{{daifas.is_refunt==0?'退款申请中':'申请退款'}}</div>
								<div @click="share_group(index)" v-show="daifas.status==2&&daifas.s_status==0&&daifas.is_refunt!='0'" class="order_list_info_bottom_productBtn_right order_list_info_bottom_productBtn_one">分享</div>
								<div @click="pay_fun(index)" v-show="daifas.status==1&&daifas.s_status==0" class="order_list_info_bottom_productBtn_right order_list_info_bottom_productBtn_one">去付款</div>
								<div @click="del_order(index)" v-show="daifas.status==1&&daifas.s_status==0" class="order_list_info_bottom_productBtn_right order_list_info_bottom_productBtn_one">取消订单</div>
								<div @click="confirm_order(daifas.orderid)" v-show="daifas.status==3&&daifas.s_status==1" class="order_list_info_bottom_productBtn_right order_list_info_bottom_productBtn_one">确认收货</div>
								<div @click="pinglun(index)" v-show="daifas.status==4&&daifas.s_status==1" class="order_list_info_bottom_productBtn_right order_list_info_bottom_productBtn_one">评价</div>
							</div>
						</div>
					</li>

				</ul>

			</div>
		</div>

	</div>
	<script src="../js/mui.min.js"></script>
	<script src="../js/vue.min.js"></script>
	<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/tools/util.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/host.config.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/js.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/tools/pay.js" type="text/javascript" charset="utf-8"></script>
	<script>
		Vue.filter("status_to_name",
			function (order) {

				/* 
				status  1    s_status 0       代付款
				status  2    s_status 0       拼团中
				status  2    s_status 1       拼团成功
				status  2    s_status -1      拼团失败 
				*/

				if (order.status == 1 && order.s_status == 0) {
					return "待付款"
				}

				if (order.status == 2 && order.s_status == 0) {
					return "还差人" + order.sheng + "拼团成功"
				}

				if (order.status == 2 && order.s_status == 1) {
					return "拼团成功 待发货"
				}

				if (order.status == 3 && order.s_status == 1) {
					return "拼团成功 已发货"
				}

				if (order.status == 2 && order.s_status == -1) {
					return "拼团失败"
				}



			})
		var app = new Vue({
			el: '#order',
			data: {
				uid: '',
				now_nav_index: 1,
				top_nav: [{
						name: '拼团中',
						status: '1'
					},
					{
						name: '待付款',
						status: '2'
					},
					{
						name: '拼团成功',
						status: '3'
					},
					{
						name: '拼团失败',
						status: '4'
					}
				],
				list: [],

			},
			methods: {
				removeOrder: function (index) {
					this.daifu.splice(index, 1);
				},
				
				get_order: function (uid, status, cb) {
					/*

					 * arguments
					 * 		uid	用户ID
					 * 		type 订单状态
					 * 		cb 成功回调，将订单列表数据作为回调参数
					 *
					 * */


					$.ajax({
						type: 'get',
						// url: 'https://zhapp.4hl.cn/api/spell/userdefault',
						url: 'https://zhapp.4hl.cn/api/spell/userdefaults',
						data: {
							uid: uid,
							type: status,

						},
						success: function (res) {
							if (res && typeof res == 'string') {
								res = JSON.parse(res)
							}

							if (res.code == 1) {
								cb(res.data)
							} else {
								mui.alert('网络连接出现问题')

							}

						},
						error: function () {
							mui.alert('网络连接出现问题')

						}
					})
				},
				up_data: function (status, uid) {
					var that = this;
					status = status + "";

					util.log("up_data   type-->" + status + "uid-->" + uid)


					switch (status) {
						case "1":
							this.get_order(uid, 1, function (data) {
								console.log('拼团中', data)
								that.list = data;

							}); //状态（状态（1：待付款 2：待发货 3：待收货4：已完成  -1：关闭））
							return "待付款"
							break;
						case "2":
							this.get_order(uid, 2, function (data) {
								console.log('代付款', data)
								that.list = data;

							}); //状态（状态（1：待付款 2：待发货 3：待收货4：已完成  -1：关闭））
							return "待发货"
							break;
						case "3":
							this.get_order(uid, 3, function (data) {
								console.log('拼团成功', data)
								that.list = data;

							}); //状态（状态（1：待付款 2：待发货 3：待收货4：已完成  -1：关闭））
							return "待收货"
							break;
						case "4":
							this.get_order(uid, 4, function (data) {
								console.log('拼团失败', data)
								that.list = data;

							}); //状态（状态（1：待付款 2：待发货 3：待收货4：已完成  -1：关闭））
							return "已完成"
							break;

						default:
							break;
					}

				},
				change_nav: function (k) {
					var status = k + 1;
					util.log("change_nav-->status-->" + status)
					this.up_data(status, this.uid);
					this.now_nav_index = k + 1;

				},
				
				share_group:function(k){
					var order = this.list[k];
					console.log(order)
					mui.openWindow("share_group.html?orderid="+order.orderid+"&sid="+order.sid)
				},
				// 取消订单
				
				
				del_order: function (k) {
					var order = this.list[k];
					console.log(order)
					var orderid = order.orderid;
					$.ajax({
						type: 'post',
						url: 'https://zhapp.4hl.cn/api/order/cancelOrder',
						data: {
							orderid: orderid
						},
						success: function (res) {
							console.log(res);
							res = JSON.parse(res);
							if (res.code == 1) {
								mui.toast("订单取消成功");
								plus.webview.currentWebview().reload()
							}
						},
						error: function (err) {
							console.log(err)
						}
					})
				},
				// 支付
				pay_fun: function (k) {
					pay_fun(this, k);
				},
				// 退款
				back_money: function (k) {
					console.log(this.list[k]);
					var order = this.list[k]
					if (order.is_refunt == 0) {
						mui.toast("您已提出退款申请，请耐心等待..");
						return
					};

					mui.prompt("请输入退款原因", "请输入退款原因", "退款原因", ["取消", "确定"], function (e) {

						if (e.index == 1) {
							util.log("退款");

							util.log("explain-->" + e.value);
							util.log("order_no-->" + order.order_no)

							$.ajax({
								type: 'get',
								url: 'https://zhapp.4hl.cn/app/order/refundmoney',
								data: {
									order_no: order.order_no,
									explain: e.value,
								},
								success: function (res) {
									util.log('success')
									util.log(res)
									res = JSON.parse(res);
									if (res.code == 1) {
										mui.toast("退款申请成功");
										plus.webview.currentWebview().reload()
									}
								},
								error: function (err) {
									alert(err)
								}


							})
						}
					})
				},
				to_order_detail: function (order_id) {
					mui.openWindow('group_order_list_detail.html?order_id=' + order_id, 'group_order_list_detail.html')
				},
				confirm_order: function (order_id, uid) {
					var uid = this.uid;
					//确认收货
					mui.confirm("确认收货吗？", "温馨提示", ["确认", "取消"], function (e) {
						console.log(e)
						if (e.index == 0) {
							$.ajax({
								type: "get",
								url: "https://zhapp.4hl.cn/api/order/takeGoods",
								async: true,
								data: {
									orderid: order_id,
									uid: uid
								},
								success: function (res) {
									res = JSON.parse(res)
									console.log(res)
									if (res.code == 1) {
										mui.toast("确认收货成功");
										if (window.plus) {
											mui.toast("确认收货成功")
											plus.webview.currentWebview().reload()
										} else {
											window.location.reload()
										}
									} else {
										mui.toast("确认收货失败")
									}
								},
								error: function (err) {
									mui.toast("服务器出问题了")
								}
							});
						} else {

						}
					}, "div")

				},
				pinglun: function (k) {
					console.log(JSON.stringify(this.list[k]));

					localStorage.setItem("pingjia_goods_info", JSON.stringify(this.list[k]))
					//跳转评价页面
					mui.openWindow('pinglun.html', 'pinglun.html')
				}

			},
			created: function () {
				//初始化数据
				var that = this;
				// this.uid = localStorage.getItem("uid");
				var user = host_config.localStorage.user;
				if (user) {
					this.user = JSON.parse(user);
				}
				this.uid = this.user.uid;
				var status = util.GetQueryString('status');
				if (status) {
					this.now_nav_index = status;
					this.up_data(status, this.uid)
				} else {
					status = 1;
					this.now_nav_index = status;
					this.up_data(status, this.uid)
				}

			},
			mounted: function () {
				mui.init({
					//				swipeBack: false
				});
			}
		})
	</script>

</body>

</html>
